<template>
  <div>
    <a-form :model="formState" ref="ossForm" v-bind="formItemLayout">
      <a-form-item name="serviceName" label="存储方式">
        <a-select v-model:value="formState.serviceName" placeholder="请选择存储方式">
          <a-select-option value="LOCAL_OSS">本地服务器</a-select-option>
          <a-select-option value="ALI_OSS">阿里云</a-select-option>
          <a-select-option value="MIO_OSS">Minio</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="accessKey" label="accessKey" v-if="formState.serviceName!='LOCAL_OSS'">
        <a-input v-model:value="formState.accessKey"/>
      </a-form-item>
      <a-form-item name="secretKey" label="secretKey" v-if="formState.serviceName!='LOCAL_OSS'">
        <a-input v-model:value="formState.secretKey"/>
      </a-form-item>
      <a-form-item name="bucket" label="bucket空间" v-if="formState.serviceName!='LOCAL_OSS'">
        <a-input v-model:value="formState.bucket"/>
      </a-form-item>
      <a-form-item name="endpoint" label="endpoint域名" v-if="formState.serviceName!='LOCAL_OSS'">
        <a-input v-model:value="formState.endpoint">
          <template #addonBefore>
            <a-select v-model:value="formState.http" style="width: 90px">
              <a-select-option value="http://">http://</a-select-option>
              <a-select-option value="https://">https://</a-select-option>
            </a-select>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="filePath" label="存储路径" v-if="formState.serviceName=='LOCAL_OSS'">
        <a-input v-model:value="formState.filePath"/>
      </a-form-item>
      <a-form-item name="endpoint2" label="endpoint域名" v-if="formState.serviceName=='LOCAL_OSS'">
        <a-input v-model:value="formState.endpoint">
          <template #addonBefore>
            <a-select v-model:value="formState.http" style="width: 90px">
              <a-select-option value="http://">http://</a-select-option>
              <a-select-option value="https://">https://</a-select-option>
            </a-select>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
<!--        <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>-->
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab1" setup>
import {onMounted, ref} from 'vue';
import {getOssConfig, saveOss} from '../data/config.api';

const ossForm = ref();
const formItemLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 10},
};
const formState = ref({
  serviceName: 'LOCAL_OSS',
  accessKey: '',
  secretKey: '',
  endpoint: '',
  endpoint2: '',
  filePath: '',
  http: 'http://',
});

onMounted(() => {
  setData()
});


/**
 * 表单初始化
 * @param data
 */
async function setData() {
  getOssConfig({}).then((data) => {
    formState.value = JSON.parse(data[data.OSS_USED])
  })
}

/**
 * 表单提交
 */
async function handleSubmit() {
  ossForm.value.validate().then(() => {
    saveOss({
      ...formState.value
    }).then(() => {

    })
  });
}
/**
 * 表单重置
 */
async function handleReset() {
  ossForm.value.resetFields();
}
</script>
